<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" title="权益套餐" placeholder bgColor="transparent"></u-navbar>
    <view class="tabs-box">
      <view class="tabs-item" :class="{active: businessType == '1'}" @click="businessType='1'">使用时长</view>
      <view class="tabs-item" :class="{active: businessType == '2'}" @click="businessType='2'">合同分数</view>
      <view class="tabs-item" :class="{active: businessType == '3'}" @click="businessType='3'">短信</view>
    </view>
    <view class="list">
      <view
        class="list-item"
        :style="'background-image: url('+bgInfo[businessType].bg+');'"
        v-for="item in platformRightsList"
        :key="item.id"
        @click="getPayInfo(item.id)"
      >
        <view class="name" :style="bgInfo[businessType].color">
          <view>¥<text>{{ item.price }}</text></view>
          <view v-if="businessType == '1'">{{ item.amount }}天</view>
          <view v-if="businessType == '2'">{{ item.amount }}份</view>
          <view v-if="businessType == '3'">{{ item.amount }}条</view>
        </view>
        <view class="info">
          <view class="price">
            <text>{{ (item.price / item.amount).toFixed(3)  }}</text>
            <view class="unit">
              <template v-if="businessType == '1'">元/天</template>
              <template v-if="businessType == '2'">元/份</template>
              <template v-if="businessType == '3'">元/条</template>
              <image v-if="businessType == '1'" mode="heightFix" src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/listicon1.png" />
              <image v-if="businessType == '2'" mode="heightFix" src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/listicon2.png" />
              <image v-if="businessType == '3'" mode="heightFix" src="https://gowork365.com/prod-api/profile/mini/enterpriseInfo/listicon3.png" />
            </view>
          </view>
          <view v-if="businessType == '1'" class="tips u-m-t-6">赠送合同份数{{ item.giftContract }}份</view>
          <view v-if="businessType == '1'" class="tips">赠送短信条数{{ item.giftSms }}条</view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import indexBg from '../../static/index/indexBg.png'
import { platformRightsGetList, platformRightsPayOrder } from '@/api/index'

export default {
  data() {
    return {
      indexBg,
      businessType: '1',
      bgInfo: { 
        '1': {bg: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/list1.png', color: 'color: #1D9DCD;'},
        '2': {bg: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/list2.png', color: 'color: #5061E3;'},
        '3': {bg: 'https://gowork365.com/prod-api/profile/mini/enterpriseInfo/list3.png', color: 'color: #F27723;'},
      },
      platformRightsList: [],
    }
  },
  watch: {
    businessType() {
      this.platformRightsList = []
      this.getplatformRightsList()
    },
  },
  onLoad() {
    this.getplatformRightsList();
  },
  methods: {
    getPayInfo(id) {
      uni.showLoading({ mask: true })
      const that = this
      const userInfo = uni.getStorageSync('userInfo')
      platformRightsPayOrder({ rightsId: id, userId: userInfo.userId, openId: userInfo.openId }).then(res => {
        uni.hideLoading()
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success: function (res) {
            uni.showToast({
              icon: 'none',
              title: '支付成功'
            })
          },
          fail: function (err) {
            uni.showToast({
              icon: 'none',
              title: '支付失败'
            })
          }
        });
      })
    },
    getplatformRightsList() {
      uni.showLoading({ mask: true })
      platformRightsGetList({ businessType: this.businessType }).then(res => {
        uni.hideLoading()
        this.platformRightsList = res.data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 690rpx;
  padding-bottom: 180rpx;
  .tabs-box {
    width: 686rpx;
    display: flex;
    gap: 14rpx;
    margin: 48rpx auto 38rpx;
    .tabs-item {
      width: 196rpx;
      height: 76rpx;
      line-height: 76rpx;
      border-radius: 38rpx;
      text-align: center;
      font-family: PingFang-SC, PingFang-SC;
      font-size: 24rpx;
      color: #FFFFFF;
    }
    .active {
      background: #FFFFFF;
      color: #138E88;
    }
  }
  .list {
    width: 714rpx;
    margin: 0 auto;
    .list-item {
      width: 100%;
      height: 248rpx;
      background-repeat: no-repeat;
      background-size: 714rpx 248rpx;
      padding: 0 104rpx 0 94rpx;
      padding-bottom: 14rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-family: PingFangSC, PingFang SC;
        font-size: 28rpx;
        text {
          font-size: 48rpx;
          font-weight: 500;
        }
      }
      .price {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: rgba(0,0,0,0.85);
        text {
          font-family: Roboto, Roboto;
          font-weight: bold;
          font-size: 52rpx;
          color: rgba(0,0,0,0.85);
          font-style: italic;
          margin-right: 4rpx;
        }
        .unit {
          display: inline-block;
          image {
            margin-left: 8rpx;
            width: auto;
            height: 30rpx;
            vertical-align: middle;
          }
        }
      }
      .info {
        .tips {
          font-family: PingFang-SC, PingFang-SC;
          font-size: 22rpx;
          color: rgba(0,0,0,0.5);
        }
      }
    }
  }
}
</style>
